@babel/plugin-proposal-class-properties

What is @babel/plugin-proposal-class-properties?

The @babel/plugin-proposal-class-properties package is a Babel plugin that allows you to use the class properties syntax in JavaScript. This syntax is part of a proposal for ECMAScript and has not been finalized yet, but this plugin lets you use it with Babel to compile your code to a version of JavaScript that is compatible with current environments. It supports both static and instance properties, as well as public and private fields.

What are @babel/plugin-proposal-class-properties's main functionalities?

Static Class Properties

Allows you to define static properties on a class, which are properties that are accessed on the class itself, not on instances of the class.

class MyClass {\n  static myStaticProp = 42;\n}

Instance Class Properties

Enables you to define properties directly on class instances, with an initial value, without needing to set them inside the class constructor.

class MyClass {\n  myInstanceProp = 'default value';\n}

Public Class Fields

Supports the declaration of public fields in a class, which are accessible from outside of the class.

class MyClass {\n  publicField = 'some value';\n}

Private Class Fields

Allows the definition of private fields in a class, which are only accessible within the class itself using the '#' syntax.

class MyClass {\n  #privateField = 'hidden value';\n}

Other packages similar to @babel/plugin-proposal-class-properties

@babel/plugin-proposal-private-methods

This package is similar to @babel/plugin-proposal-class-properties but focuses on adding support for private methods and accessors in classes. It allows you to define methods that can only be called from within the class itself.

@babel/plugin-proposal-decorators

This package provides functionality for decorators, which are a stage 2 proposal for JavaScript. Decorators are a way to modify classes or properties at design time. While not directly related to class properties, decorators often work in conjunction with them to add annotations or modify class behavior.

@babel/plugin-transform-classes

This package transforms ES2015 classes to ES5, which is a broader transformation that includes but is not limited to class properties. It's more comprehensive in terms of class-related transformations but does not specifically target the class properties proposal.

README

@babel/plugin-proposal-class-properties

This plugin transforms static class properties as well as properties declared with the property initializer syntax

See our website @babel/plugin-proposal-class-properties for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-proposal-class-properties

or using yarn:

yarn add @babel/plugin-proposal-class-properties --dev

Changelog

v7.18.6 (2022-06-27)

:eyeglasses: Spec Compliance

• babel-parser
  • #14650 [ts] Disallow property access after instantiation expression (@nicolo-ribaudo)
  • #14636 [ts] Allow ...<...> followed by newline or binary operator (@nicolo-ribaudo)
• babel-generator, babel-parser, babel-preset-env, babel-template
  • #14668 JSON modules should be imported with default (@JLHwung)

:bug: Bug Fix

• babel-helper-remap-async-to-generator, babel-plugin-proposal-async-generator-functions
  • #14391 Transform await in computed class keys (@Yokubjon-J)
• babel-plugin-transform-parameters
  • #14694 fix: preserve function params type if possible (@magic-akari)
• babel-core
  • #14583 fix: Memory leak when deep cloning in babel-core (@liuxingbaoyu)
• babel-core, babel-helper-check-duplicate-nodes, babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining, babel-plugin-transform-runtime
  • #14663 Fix import { types } from "@babel/core" with native ESM (@nicolo-ribaudo)

:house: Internal

• babel-standalone
  • #14697 Add proposal-unicode-sets-regex to @babel/standalone (@nicolo-ribaudo)
• Other
  • #14687 chore: Update bench baselines (@liuxingbaoyu)
• babel-generator, babel-types
  • #14685 enable TS compiler option: strictBindCallApply (@JLHwung)
• babel-code-frame, babel-core, babel-generator, babel-helper-annotate-as-pure, babel-helper-builder-binary-assignment-operator-visitor, babel-helper-builder-react-jsx, babel-helper-check-duplicate-nodes, babel-helper-compilation-targets, babel-helper-create-class-features-plugin, babel-helper-create-regexp-features-plugin, babel-helper-define-map, babel-helper-explode-assignable-expression, babel-helper-fixtures, babel-helper-function-name, babel-helper-hoist-variables, babel-helper-member-expression-to-functions, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-optimise-call-expression, babel-helper-plugin-test-runner, babel-helper-plugin-utils, babel-helper-remap-async-to-generator, babel-helper-replace-supers, babel-helper-simple-access, babel-helper-split-export-declaration, babel-helper-transform-fixture-test-runner, babel-helper-validator-option, babel-helper-wrap-function, babel-helpers, babel-highlight, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-external-helpers, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-static-block, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-function-bind, babel-plugin-proposal-function-sent, babel-plugin-proposal-json-strings, babel-plugin-proposal-object-rest-spread, babel-plugin-proposal-optional-chaining, babel-plugin-proposal-partial-application, babel-plugin-proposal-pipeline-operator, babel-plugin-proposal-private-property-in-object, babel-plugin-proposal-record-and-tuple, babel-plugin-syntax-typescript, babel-plugin-transform-block-scoped-functions, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-computed-properties, babel-plugin-transform-destructuring, babel-plugin-transform-duplicate-keys, babel-plugin-transform-exponentiation-operator, babel-plugin-transform-flow-comments, babel-plugin-transform-flow-strip-types, babel-plugin-transform-for-of, babel-plugin-transform-function-name, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-object-super, babel-plugin-transform-parameters, babel-plugin-transform-property-mutators, babel-plugin-transform-proto-to-assign, babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-display-name, babel-plugin-transform-react-inline-elements, babel-plugin-transform-react-jsx-compat, babel-plugin-transform-react-jsx-source, babel-plugin-transform-react-jsx, babel-plugin-transform-runtime, babel-plugin-transform-typescript, babel-plugin-transform-unicode-escapes, babel-preset-env, babel-preset-typescript, babel-standalone, babel-template, babel-traverse, babel-types
  • #14601 enable noImplicitAny (@JLHwung)
• babel-core, babel-helper-transform-fixture-test-runner, babel-plugin-transform-destructuring
  • #14659 Run Babel asynchronously in fixtures (@nicolo-ribaudo)